<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card class="box-card">
        <div class="header">
          <search-keyword
            :queryInfo="queryInfo"
            :options="searchOptions"
            @search="getRights"
          />
          <el-button
            class="addBtn"
            type="success"
            size="mini"
            icon="el-icon-edit"
            @click="isPermissionVisible=true"
          >新增权限组</el-button>
        </div>
        <el-alert
          type="info"
          show-icon
        >
          <i slot="title"> 共 {{this.total}} 条数据</i>
        </el-alert>
        <el-table
          :data="rightsList"
          style="width: 100%"
          @selection-change="handleSelectionChange"
          v-loading="loading"
          element-loading-text="请给我一些时间"
        >
          <el-table-column type="selection">
          </el-table-column>
          <el-table-column
            prop="title"
            label="用户名"
            align="center"
          >
          </el-table-column>
          <el-table-column
            label="日期"
            align="center"
            sortable
            :sort-method="changesort"
          >
            <template slot-scope="scope">{{ scope.row.create_date }}</template>
          </el-table-column>
          <el-table-column
            align="right"
            label="操作"
          >
            <template slot-scope="scope">
              <!-- 编辑按钮 -->
              <el-button
                class="handleBtn"
                plain
                type="primary"
                icon="el-icon-edit"
                size="mini"
                circle
                @click="editPermission(scope.row)"
              ></el-button>
              <!-- 删除按钮 -->
              <el-button
                class="handleBtn"
                plain
                type="danger"
                icon="el-icon-delete"
                size="mini"
                circle
                @click="removePermission(scope.row.id)"
              ></el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页区域 -->
        <pagination
          :queryInfo="queryInfo"
          :total="total"
          @pagination="getRights"
        />
      </el-card>
      <!-- 新增权限弹层 -->
      <permissions-add
        v-if="isPermissionVisible"
        @close="closeForm"
      ></permissions-add>
      <!-- 编辑权限弹层 -->
      <permissionsApi-add
        v-if="isEditPermissionVisible"
        @close="closeEditForm"
        :permissions="permissions"
      ></permissionsApi-add>
    </div>
  </div>
</template>

<script>
import SearchKeyword from '@/module-manage/components/search.vue'
import Pagination from '@/module-manage/components/pagination.vue'
import PermissionsAdd from '@/module-manage/components/permissions-add.vue'
import PermissionsApiAdd from '@/module-manage/components/permissionsApi-add.vue'
import { list as getRightsList, remove as removeRights } from '@/api/base/permissions.js'
export default {
  name: 'base-permissions',
  data () {
    return {
      searchOptions: {
        placeholder: '根据用户名搜索', // 输入框内提示信息
        keyword: 'title'
      },
      queryInfo: {
        title: '', // 关键字
        page: 1, // 当前页码
        pagesize: 10 // 每页显示的条数
      },
      rightsList: [], // 权限列表数据
      multipleSelection: [], // 多选框选中的值
      total: 0, // 数据总条数
      isPermissionVisible: false, // 控制权限弹框的隐藏和显示
      loading: false, // 控制数据的加载状态
      isEditPermissionVisible: false, // 控制编辑弹框的隐藏和显示
      permissions: null // 编辑的权限组数据
    }
  },
  components: {
    SearchKeyword,
    PermissionsAdd,
    Pagination,
    PermissionsApiAdd
  },
  created () {
    this.getRights()
  },
  methods: {
    handleSelectionChange (val) {
      this.multipleSelection = val
      console.log(this.multipleSelection)
    },
    // 获取权限列表
    async getRights () {
      this.loading = true
      const { data } = await getRightsList(this.queryInfo)
      // console.log(data)
      // 时间格式
      data.list.forEach(item => {
        item.create_date = this.$dayjs(item.create_date).format('YYYY-MM-DD')
      })
      this.rightsList = data.list
      this.total = data.counts
      this.loading = false
    },
    // 日期排序
    changesort (a, b) {
      const oldTime = new Date(a.date).getTime() / 1000
      const newime = new Date(b.date).getTime() / 1000
      if (oldTime - newime > 0) {
        return true
      } else {
        return false
      }
    },
    // 关闭添加弹框且刷新页面
    closeForm () {
      this.isPermissionVisible = false
      this.getRights()
    },
    // 删除功能
    async removePermission (id) {
      const confirmResult = await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      console.log(confirmResult)
      console.log(id)
      if (confirmResult !== 'confirm') return this.$message.info('取消删除')
      await removeRights({ id })
      this.$message.success('删除成功')
      this.getRights()
    },
    // 编辑功能
    editPermission (data) {
      this.isEditPermissionVisible = true
      console.log(data)
      this.permissions = data
    },
    // 关闭编辑弹框并刷新页面
    closeEditForm () {
      this.isEditPermissionVisible = false
      this.getRights()
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard-container {
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    .el-input {
      width: 200px;
      height: 36px;
      line-height: 36px;
    }
  }
  .handleBtn {
    width: 36px;
    height: 36px;
  }
  .demo-ruleForm {
    width: 400px;
    margin-left: 120px;
  }
}
</style>
